<script lang="ts">
import {defineComponent, onMounted, onUnmounted, PropType, ref, watch} from "@vue/runtime-core";
import {
  QTAnimationInterpolatorType,
  QTAnimationPropertyName,
  QTAnimationRepeatMode,
  QTAnimationValueType
} from "@quicktvui/quicktvui3";
import {generateUniqueNumber} from "../../utils/Tools";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {Transform} from "../../types/Transform";
const TAG='AAnimate'
export default defineComponent({
  emits:['end'],
  props:{
    transform:{
      type:Object as PropType<Transform>
    },
    execute:{
      type:Boolean,
      default:false
    },
    listenAnimator:{
      type:Boolean,
      default:false
    }
  },
  setup(props,{emit}){
    const animationViewRef=ref()
    watch(()=>[props.execute,animationViewRef.value],([newVal,newRef])=>{
      if (newVal&&newRef) {
        log.d(TAG,'execute')
        execute()
      }
    })
    const uniqId = generateUniqueNumber();
    function execute(){
      if (!props.transform) {
        log.e(TAG,'transforms is empty')
        return;
      }
      if (props.transform.values.length > 10) {
        log.e(TAG,'Max 10 animation values supported');
        return;
      }
      // 参数归一化处理
      const {
        valueType=QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
        type,
        duration,
        values = [],
        interpolator = null,
        repeatMode=QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE,
        repeatCount=0
      } = props.transform;

      const methodName = `objectAnimator${values.length || ''}`;
      const listenAnimator=props.listenAnimator
      const listenAnimatorValue=false
      const args = [
        uniqId,
        valueType,
        type,
        ...values.slice(0, 10), // 限制最大参数数量
        duration,
        repeatMode,
        repeatCount,
        listenAnimator,
        listenAnimatorValue,
        interpolator
      ].filter(arg => arg !== undefined);
      // 动态调用方法
      const animatorMethod = animationViewRef.value?.[methodName];
      if (typeof animatorMethod === 'function') {
        animatorMethod.apply(animationViewRef.value, args);
        animationViewRef.value?.startAnimator(uniqId);
      } else {
        log.e(TAG,`Invalid animator method: ${methodName}`);
      }
    }
    onUnmounted(() => {
      animationViewRef.value?.cancelAnimator(uniqId);
    });
    const log = useESLog()

    function onAnimationCancel(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationCancel------->>>>', id)
      }
    }

    function onAnimationEnd(id, isReverse) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationEnd------->>>>', id, isReverse)
      }
      emit('end')
    }

    function onAnimationRepeat(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationRepeat------->>>>', id)
      }
    }

    function onAnimationStart(id, isReverse) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationStart------->>>>', id, isReverse)
      }
    }

    function onAnimationPause(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationPause------->>>>', id)
      }
    }

    function onAnimationResume(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationResume------->>>>', id)
      }
    }
    return {
      onAnimationEnd,
      animationViewRef
    }
  }
})

</script>

<template>
  <qt-animation
      ref="animationViewRef"
      :onAnimationEnd="onAnimationEnd"
  >
    <slot/>
  </qt-animation>
</template>

<style scoped>

</style>
